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3 - Basic Elements 



We will see how to make a real Phaser game that is inspired by the popular Super Crate Box. We 
will control a small guy in a blue world that tries to collect coins while avoiding enemies. 




When finished, the game is going to be full featured: menu, player, enemies, animations, sounds, 
tilemaps, mobile friendly, etc. And since that's a lot of information, we will cover all of this step by 
step in 5 different chapters. 

This is the first chapter where we are going to create the basic elements of the game: a player, a 
world, some coins, and many enemies. 



3.1 - Empty Game 

Let's start by creating an empty game, so this is going to be similar to what we did in the previous 
chapter. By the end of this part, we will have this: 




Don't worry, it will quickly become more interesting. 

Set Up 

First we need to create a new directory called "first-game", where we should add: 

• phaser.min.js, the Phaser framework. 

• main.js, that will contain the game's code. For now it's just an empty file. 

• index.html, that will display the game. We can use the same index file that we made in the 
previous chapter. 

• assets/, a directory that contains all the images and sounds. The assets can be downloaded 
here 
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wallVertical.png 
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Code the Main File 

The Javascript code for any new Phaser project is basically always going to be the same: 

1. Create the states. Remember that a state is a scene of a game, like a loading scene, a menu, 
etc. 

2. Initialise Phaser. That's where we define the size of our game among other things. 

3. Tell Phaser what the states of our game are. 

4. And start one of the states, to actually start the game. 

These 4 steps are explained below in detail. 

First, we create the states. For now we will have only one, that will include 3 of the default Phaser 
functions: 

// We create our only state, called ' mainState ' 
var mainState = { 

// We define the 3 default Phaser functions 

preload: functionQ { 

// This function will be executed at the beginning 
// That's where we load the game's assets 

}, 

create: functionQ { 

// This function is called after the preload function 
// Here we set up the game, display sprites, etc. 
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}, 

update: function() { 

// This function is called 60 times per second 
// It contains the game's logic 

}, 

// And here we will later add some of our own functions 

}; 



The preload, create and update functions are key to any Phaser project, so make sure to read the 
comments above to understand what they do. We will spend most of our time in these 3 functions 
to create our game. 

Main State 



Preload 




Create 




Update 




> 


> 


< — 



Then, we initialise Phaser with Phaser . Game. 

Phaser .Game(gameWidth, gameHeight, Tenderer, htmlElement) 

• gameWidth: width of the game in pixels 

• gameHeight: height of the game in pixels 

• Tenderer: how to render the game, I recommend using Phaser. AUTO that will 
automatically choose the best option between webGL and canvas 

• htmlElement: the ID of the HTML element where the game will be displayed 



For our game, we add this below the previous code: 



// Create a 500px by 340px game in the 'gameDiv' element of the index.html 
var game = new Phaser .Game (500, 340, Phaser. AUTO, 'gameDiv'); 



Next, we tell Phaser to add our only state: 
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// Add the ' mainState ' to Phaser, and call it 'main' 
game . state . add( ' main ' , mainState) ; 



And finally, we start our 'main' state: 



game . state . start ( ' main ' ) ; 



Our empty project is now done. But let's add a couple of things in it that are going to be useful. 

Background Color 

By default, the background color of the game is black. We can easily change that by adding this line 
of code in the create function: 



game . stage . backgroundColor = '#3498db'; 



The #3498db is the hexadecimal code for a blue color. 

Physics Engine 

One of the great features of Phaser is that it has 3 physics engines included. A physics engine is what 
will manage the collisions and movements of all the objects in the game. 

The 3 engines available are: 

• P2. It's a full featured physics system that lets us build games with complex collisions, like 
Angry Birds. 

• Ninja. It's less powerful than P2, but still has some interesting features to handle tilemaps and 
slopes. 

• Arcade. It's the most basic system that only deals with rectangle collisions (called AABB), but 
it also has the best performance. 

Which one is the best? It really depends on what type of game we want to build. In our case we will 
use Arcade physics, and to tell that to Phaser we just need this line of code in the create function: 
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game . physics . startSystem( Phaser . Physics . ARCADE) ; 



Conclusion 

Once you put all of the Javascript code in the main.js file, you can test the game by either: 

• Using the live preview of Brackets 

• Or accessing the "first-game" folder from your webserver 

If you see an empty blue screen, it means that everything is working properly. 



3.2 - Add the Player 

The first interesting thing we are going to add to the game is the player, and a way to control it. To 
do so, we will make some changes to the main.js file. 



Load the Player 

In Phaser, every time we want to use an asset (image, sound, etc.) we first need to load it. For an 
image, we can do that with the game . load . image function. 



game. load . image( imageName, imagePath) 

• imageName: the new name that will be used to reference the image 

• imagePath: the path to the image 



To load the player sprite, we add this in the preload function: 



game . load . image( ' player ' , ' assets/player . png ' ) ; 
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Display the Player 

Once the sprite is loaded, we can display it on the screen with game . add . sprite, 
game. add. sprite(positionX, positionY, imageName) 

• positionX: horizontal position of the sprite 

• positionY: vertical position of the sprite 

• imageName: the name of the image, as defined in the preload function 



Note that if we add a sprite at the 0, 0 position, it will be displayed in the top left corner of the game. 
To add the sprite at the center of the screen we could write this in the create function: 

// Create a local variable 

var player = game . add . sprite(250, 170, 'player'); 



However, since we want to be able to use the player everywhere in our state, we need to use the 
this keyword: 

// Create a state variable 

this. player = game . add . sprite(250, 170, 'player'); 



And we can do even better by using some predefined variables for the x and y positions: 

this. player = game . add . sprite(game . world . centerX, game . world . centerY, 'player'); 



That's the line we should actually add in the create function. 

Some other useful Phaser variables include: game . world . width, game . world . height, game . world . randomX, 
game . world . randomY. They should be self explanatory. 
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Anchor Point 

If you test the game, you might notice that the player is not exactly centered. That's because the x 
and y we set in game . add . sprite is the position of the top left corner of the sprite, also called the 
anchor point. So it's the top left corner of the player that is centered, and that's not what we want. 




To fix that, we will need to change the anchor point's position. Here are some examples of how we 
can do that: 



// Set the anchor point to 


the top left of the sprite (default value) 


this . player . anchor . setTo(0, 


0); 


// Set the anchor point to 


the top right of the sprite 


this . player . anchor . setTo(l , 


0); 


// Set the anchor point to 


the bottom left of the sprite 


this . player . anchor . setTo(0, 


D; 


// Set the anchor point to 


the bottom right of the sprite 


this . player . anchor . setTo(l , 


D; 



To center the player, we need to set the anchor point to the middle of the sprite, in the create 
function: 
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this . player . anchor . setTo(0 . 5, 0.5); 



Add Gravity to the Player 

Let's add some gravity to the player, to make it fall. To do so, we need to add this in the create 
function: 



// Tell Phaser that the player will use the Arcade physics engine 
game . physics . arcade . enable (this . player) ; 

// Add vertical gravity to the player 
this . player . body . gravity . y = 500; 



Adding Arcade physics to the player is really important, it will allow us to use its body property to: 

• Add gravity to the sprite to make it fall (see above) 

• Add velocity to the sprite to be able to move it (see below) 

• Add collisions (see in the next part) 

Control the Player 

There are a couple of things that need to be done if we want to move the player around with the 
arrow keys. 

First, we have to tell Phaser which keys we want to use in our game. For the arrow keys, we simply 
add this in the create function: 



this. cursor = game . input . keyboard . createCursorKeys( ) ; 



And thanks to this . cursor, we can now add a new function (just after the update) that will handle 
all the player's movements: 
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movePlayer: functionQ { 

// If the left arrow key is pressed 
if (this. cursor. left. isDown) { 

// Move the player to the left 

this . player . body . velocity .x = -200; 

} 

// If the right arrow key is pressed 
else if (this. cursor .right. isDown) { 

// Move the player to the right 

this . player . body . velocity .x = 200; 

} 

// If neither the right or left arrow key is pressed 
else { 

// Stop the player 

this . player . body . velocity . x = 0; 

} 

// If the up arrow key is pressed and the player is touching the ground 
if (this . cursor . up . isDown && this . player . body . touching . down ) { 

// Move the player upward (jump) 

this . player . body . velocity . y = -320; 

} 

}, 



In Phaser, the velocity is expressed in pixels per second. 

And finally, we have to call movePlayer inside the update function: 

this . movePlayer ( ) ; 



This way, we check 60 times per second if an arrow key is pressed, and move the player accordingly. 

More About Sprites 

For your information, a sprite has a lot of interesting parameters, and here are the main ones: 
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// Change the position of the sprite 
sprite. x = 50; 
sprite. y = 50; 

// Return the width and height of the sprite 
sprite .width ; 
sprite. height; 

// Change the transparency of the sprite. 0 = invisible, 1 = normal 
sprite. alpha = 0.5; 

// Change the angle of the sprite, in degrees 
sprite. angle = 42; 

// Remove the sprite from the game 
sprite . ki 1 1 ( ) ; 



Conclusion 

As usual, you should check that everything is working as expected. If so, you will be able to control 
the player while falling, and see him disappear from the screen. 

If something is not working, you can get some help by looking at the finished source code at the end 
of this chapter. 



3.3 - Create the World 

Having a player falling is nice, but it would be better if there was a world in which he could move 
around. That's what we are going to fix in this part by doing this: 



Load the Walls 

With 2 sprites (an horizontal and a vertical wall) added at different locations, we will be able to 
create the whole new world. 



As we explained previously, we need to start by loading our assets in the preload function: 
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game . load . image( 1 wal IV , ' assets/wal 1 Vertical . png ' ) ; 
game . load . image( ' wal 1H ' , ' assets/wal lHorizontal . png ' ) ; 



You can see that the name of the image doesn't have to be the same as its filename. 

Add the Walls - Idea 

Let's create the left and right walls of the game: 



// Create the left wall 

var leftWall = game . add . sprite(0, 0, 'wallV'); 

// Add Arcade physics to the wall 
game . physics . arcade . enable( lef tWal 1 ) ; 

// Set a property to make sure the wall won't move 

// We don't want to see the wall fall when the player touches it 

leftWal 1 . body . immovable = true; 

// Do the same for the right wall 
var rightWall = game . add . sprite(480, 0, 'wallV'); 
game . physics . arcade . enable(r ightWal 1 ) ; 
rightWal 1 . body . immovable = true; 



That's 6 lines of code for just 2 walls, so if we do this for the 10 walls it will quickly become messy. 
To avoid that we can use a Phaser feature called groups, which let us group objects together that 
can easily share some properties. Here's how it works for our 2 walls: 



// Create a new group 

this. walls = game . add . group( ) ; 



// Add Arcade physics to the whole group 
this . wal Is . enableBody = true; 



// Create 2 walls in the group 

game . add . sprite(0, 0, 'wallV, 0, this. walls); // Left wall 
game . add . sprite(480, 0, 'wallV, 0, this. walls); // Right wall 
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// Set all the walls to be immovable 

this . wal Is . setAl 1 ( ' body . immovable ' , true) ; 



You may notice that the game. add. sprite has 2 new optional parameters. It's the last one that's 
interesting to us: the name of the group to add the sprite in. 



Add the Walls -Code 



Adding walls is not very interesting, all we have to do is to create them at the correct positions. 
Here's the full code that does just that, in a new function: 



createWorld: functionQ { 

// Create our wall group with Arcade physics 
this. wal Is = game . add . group( ) ; 
this . wal Is . enableBody = true; 



// Create the 10 walls 

game . add . sprite(0, 0, 'wallV, 0, this. walls); //Left 
game. add. sprite(480, 0, 'wallV, 0, this. walls); //Right 

game . add . sprite(0, 0, 'wallH', 0, this. walls); // Top left 
game . add . sprite(300, 0, 'wallH', 0, this. walls); // Top right 
game . add . sprite(0, 320, 'wallH', 0, this. walls); // Bottom left 
game . add . sprite(300, 320, 'wallH', 0, this. wal Is); // Bottom right 

game . add . sprite( -100, 160, 'wallH', 0, this. walls); //Middle left 
game . add . sprite(400, 160, 'wallH', 0, this. wal Is); // Middle right 

var middleTop = game . add . sprite(100, 80, 'wallH', 0, this. walls); 
middleTop . scale . setTo(l . 5, 1); 

var middleBottom = game . add . sprite (100, 240, 'wallH', 0, this. walls); 
middleBottom . scale . setTo(l .5, 1 ) ; 



// Set all the walls to be immovable 

this . wal Is . setAl 1 ( ' body . immovable ' , true) ; 

}, 



Note that for the last 2 walls we had to scale up their width with sprite.scale.setTo(l .5, 1). 
The first parameter is the x scale (1.5 = 150%), the second is the y scale (1 = 100% = no change). 



3.3 - Create the World 

And we should not forget to call createWorld in the create function: 
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this . createWorld( ) ; 



Collisions 

If you test the game, you will probably see that there is a problem: the player is going through the 
walls. We can solve that by adding a single line of code at the beginning of the the update function: 

// Tell Phaser that the player and the walls should collide 
game . physics . arcade . col 1 ide(this . player, this . wal Is) ; 



This works because we previously enabled Arcade physics for both the player and the walls. 
However, be careful to always add the collisions at the beginning of the update function, otherwise 
it might cause some bugs. 

For fun, you can try to remove the this . wal Is .setAl 1 ( ' body, immovable ' , true) line, to see what 
happens. Hint: it's chaos. 

Restart the Game 

If the player dies by going into the bottom or top hole, nothing happens. Wouldn't it be great to have 
the game restart? Let's try to do that. 

We create a new function playerDie that will restart the game by simply starting the 'main' state: 

playerDie: functionQ { 

game . state . start( ' main ' ) ; 

}, 



And in the update function, we check if the player is in the world. If not, it means that the player 
has disappeared in one of the holes, so we will call playerDie. 
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if (! this. player . inWor Id) { 
this . playerDie( ) ; 

} 



Conclusion 



If you test the game, you should be able to jump on the platforms, run around, and die in the holes. 
This is starting to look like a real game, and that's just the beginning. 



